<template>
  <div class="mod-config">
    <basic-container>
      <div class="filter-container">
        <el-button-group>
          <el-button type="primary" icon="plus" @click="handlerAdd" label="plus">添加</el-button>
          <el-button type="primary" icon="edit" @click="handlerEdit" label="edit">编辑</el-button>
          <el-button type="primary" icon="delete" @click="handleDelete" label="delete">删除</el-button>
        </el-button-group>
      </div>

      <el-row style="margin-top: 15px;">
        <!-- 结构树 -->
        <el-col :span="6">
          <el-tree style="height: 500px;overflow-y: auto;" :data="treeData" :props="defaultProps" :filter-node-method="filterNode" class="filter-tree" type="primary"
            node-key="id" highlight-current default-expand-all @node-click="getNodeData" />
        </el-col>
        <!-- 详情 -->
        <el-col :span="18">
          <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="药品管理" name="first">
                <el-form class="verify-form" ref="form" :label-position="labelPosition" :rules="rules" :model="form"
                  label-width="80px">
                  <el-form-item label="药品类型" prop="type">
                    <el-radio-group v-model="form.type">
                      <el-radio v-if="form.type == 'one'" :disabled="formEdit" label="one">一级目录</el-radio>
                      <el-radio v-if="form.type == 'two'" :disabled="formEdit" label="two">二级目录</el-radio>
                      <el-radio v-if="form.type == 'three'" :disabled="formEdit" label="three">三级目录</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <div>
                    <el-form-item label="药品名称" prop="name">
                      <el-input v-model="form.name" :disabled="formEdit==false?false:true" placeholder="请输入组织名称" />
                    </el-form-item>
                    <el-form-item label="编码" prop="code">
                      <el-input v-model="form.code" :disabled="formEdit" placeholder="请输入编号"></el-input>
                    </el-form-item>
                    <el-form-item label="编号" prop="number">
                      <el-input v-model="form.number" :disabled="formEdit" placeholder="请输入编号"></el-input>
                    </el-form-item>
                  </div>


                  <el-form-item v-if="formStatus == 'update'">
                    <el-button type="primary" @click="update" v-prevent-re-click>更新</el-button>
                    <el-button @click="onCancel">取消</el-button>
                  </el-form-item>
                  <el-form-item v-if="formStatus == 'create'">
                    <el-button type="primary" @click="create" v-prevent-re-click>保存</el-button>
                    <el-button @click="onCancel">取消</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="商品明细" name="second">
               <!-- &lt;!&ndash; 查询条件 &ndash;&gt;
                <el-form inline label-width="80px">
                  <el-form-item label="用户名">
                    <el-input v-model="searchForm.username"></el-input>
                  </el-form-item>
                  <el-form-item label="姓名">
                    <el-input v-model="searchForm.realName"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="searchHandle">搜索</el-button>
                    <el-button icon="el-icon-delete" @click="clearSearchForm">清空</el-button>
                  </el-form-item>
                </el-form>-->
                <!-- 功能按钮 -->
                <el-row>
                  <el-col :span="12">
                    <el-button v-if="permissions.his_hisdrugcategory_add" type="primary" icon="el-icon-plus" @click="createOrUpdate('')">添加</el-button>
                  </el-col>
                  <el-col :span="12" style="float: right;">

                  </el-col>
                </el-row>
                <!-- 查询数据 -->
                <el-table :data="userList" border>
                  <!-- <el-table-column type="index" header-align="center" align="center" width="40" fixed="left" :index="indexMethod"></el-table-column> -->
                  <el-table-column key="1" prop="username" label="用户名" header-align="center" align="center" width="80" fixed="left"></el-table-column>
                  <el-table-column key="2" prop="realName" label="姓名" header-align="center" align="center" width="80" fixed="left"></el-table-column>
                  <el-table-column key="3" prop="deptId" label="所属主部门" header-align="center" align="center" width="120">
                    <template slot-scope="scope">{{deptNameConvert(scope.row.deptId)}}</template>
                  </el-table-column>
                  <el-table-column key="4" prop="phone" label="手机号" header-align="center" align="center" width="120"></el-table-column>
                  <el-table-column key="5" prop="unitId" label="单位" header-align="center" align="center" width="120">
                    <template slot-scope="scope">{{unitNameConvert(scope.row.unitId)}}</template>
                  </el-table-column>
                  <el-table-column key="6" prop="posId" label="岗位" header-align="center" align="center" width="80">
                    <template slot-scope="scope">{{posNameConvert(scope.row.posId)}}</template>
                  </el-table-column>
                  <el-table-column key="7" prop="roleId" label="角色" header-align="center" align="center" width="80">
                    <template slot-scope="scope">{{roleNameConvert(scope.row.roleId)}}</template>
                  </el-table-column>
                  <el-table-column key="8" prop="lockFlag" label="状态" header-align="center" align="center" width="60">
                    <template slot-scope="scope">
                      <el-tag v-if="scope.row.lockFlag == '0'">有效</el-tag>
                      <el-tag v-if="scope.row.lockFlag == '9'" type="danger">锁定</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column key="9" prop="createTime" label="创建时间" header-align="center" align="center" width="150"></el-table-column>
                  <el-table-column key="10" label="操作" header-align="center" align="center" width="180" fixed="right">
                    <template slot-scope="scope">
                      <el-button type="text" icon="el-icon-s-home" @click="userOrgUpdate(scope.row)">组织</el-button>
                      <el-button type="text" icon="el-icon-edit" @click="createOrUpdate(scope.row.id,scope.row.roleId)">编辑</el-button>
                      <el-button type="text" icon="el-icon-delete" @click="deletesUser(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>

                <div class="avue-crud__pagination">
                  <el-pagination
                          @size-change="sizeChangeHandle"
                          @current-change="currentChangeHandle"
                          :current-page="pageIndex"
                          :page-sizes="[10, 20, 50, 100]"
                          :page-size="pageSize"
                          :total="totalPage"
                          background
                          layout="total, sizes, prev, pager, next, jumper">
                  </el-pagination>
                </div>
              </el-tab-pane>
            </el-tabs>
        </el-col>
      </el-row>

    </basic-container>
  </div>
</template>

<script>
  import { fetchList,getHisDrugCategoryObj, delHisDrugCategoryObj,addObj,fetchOrg,putHisDrugCategoryObj,delObj } from '@/api/his/hisdrugcategory'
  import TableForm from './hisdrugcategory-form'
  import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
        dataForm: {
          key: ''
        },
        searchForm: {

        },
        formEdit: true,
        labelPosition: 'right',
        orgshow: true,
        DrugData: "",
        _name: "",
        _code: "",
        _number: "",
        validAdd: "",
        validedit: "",
        validdele: "",
        currentId: 0,
        formStatus: "",
        treeData: [],
        activeName: 'first',
        dataList: [],
        userList: [],
        searchShow: true,
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        addOrUpdateVisible: false,
        defaultProps: {
          children: "children",
          label: "name"
        },
        rules: {

        },
        form: {}
      }
    },
    components: {
      TableForm
    },
    created() {
      this.getList()
      this.getDataList()
    },
    computed: {
      ...mapGetters(['permissions'])
    },
    methods: {
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
          fetchList(Object.assign({
          current: this.pageIndex,
          size: this.pageSize
        })).then(response => {
          this.dataList = response.data.data.records
          this.totalPage = response.data.data.total
        })
        this.dataListLoading = false
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      //  获取药品列表
      getList() {
          fetchOrg(this.listQuery).then(response => {
              this.treeData = response.data.data;
          });
      },
      resetForm(str) {
          this.form = {
              parentId: this.currentId,
              name: undefined,
              sort: undefined,
              id: undefined,
              relId: undefined,
              code: undefined,
              number: undefined,
              type: str,
              deptId: undefined,
              unitId: undefined
          };
      },
      /*删除*/
      handleDelete(value) {
          this.orgshow = true;
          this.validdele = value.target.innerText;
          this.$confirm("此操作将永久删除, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
          }).then(() => {
              delObj(this.currentId).then(() => {
                  this.getList();
                  this.resetForm();
                  if (this.parentId == 0) {
                      this.form.type = 'one'
                  } else {
                      this.form.type = 'two'
                  }
                  this.onCancel();
                  this.$notify({
                      title: "成功",
                      message: "删除成功",
                      type: "success",
                      duration: 2000
                  });
              });
          });
      },
      handlerEdit(value) {
          if (this.form.id) {
              this.formEdit = false;
              this.formStatus = "update";
          }
      },
      handlerAdd(value) {
          console.log(this.form)
              let str = this.form.type;
              this.resetForm(str);
              this.validAdd = value.target.innerText;
              if (this.parentId == 0) {
                  this.form.type = 'one'
              } else if (this.form.type == 'one') {
                  this.form.type = 'two'
              } else if (this.form.type == 'two') {
                  this.form.type = 'three'
              }
              this.formEdit = false;
              this.formStatus = "create";
      },
      // 新增 / 修改
      addOrUpdateHandle(id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 删除
      deleteHandle(id) {
        this.$confirm('是否确认删除ID为' + id, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
          return delHisDrugCategoryObj(id)
        }).then(data => {
          this.$message.success('删除成功')
          this.getDataList()
        })
      },
      /*更新*/
      update() {
          this.$refs.form.validate(valid => {
              if (!valid) return;
              this.form.user = this.user
              console.log(this.user)
              putHisDrugCategoryObj(this.form).then(() => {
                  this.getList();
                  this.$notify({
                      title: "成功",
                      message: "更新成功",
                      type: "success",
                      duration: 2000
                  });
              });
          });
      },
      onCancel() {
          this.orgshow = true;
          this.formEdit = true;
          this.formStatus = "";
      },
      create() {
          this.$refs.form.validate(valid => {
              addObj(this.form).then(() => {
                  this.getList();
                  this.$notify({
                      title: "成功",
                      message: "创建成功",
                      type: "success",
                      duration: 2000
                  });
              });
          });
      },
      searchChange() {
        this.pageIndex = 1;
        this.getDataList()
      },
      // 搜索清空
      searchReset() {
        this.$refs.searchForm.resetFields();
        this.getDataList(this.page)
      },
      handleSearchShow() {
        this.searchShow = !this.searchShow;
      },
      /**
       * 刷新回调
       */
      refreshChange() {
        this.getDataList(this.page)
      },
      handleClick(){

      },
      getNodeData(data){
          if (!this.formEdit) {
              this.formStatus = "update";
          }
          console.log(data)
          getHisDrugCategoryObj(data.id).then(response => {
              console.log(response)
              this.form = response.data.data
              this.parentId = response.data.data.parentId;
              this._name = response.data.data.name;
              this._number = response.data.data.number;
              this._code = response.data.data.code;

              let getUserData = JSON.parse(JSON.stringify(data))
              this.getUserData = getUserData
              delete getUserData.children

              this.DrugData = data
          })
          this.currentId = data.id;
          this.showElement = true;
      },
      filterNode(){
      }
    }
  }
</script>
